<template>
  <div class="hacevn">
    <el-button class="cheaback" type="text" icon="el-icon-back" @click="hback"
      >返回</el-button
    >

    <el-tabs title="发布文章">
      <!-- 发布文章的对话框 -->

      <el-form
        :model="pubForm"
        :rules="artkistVisibles"
        ref="pubFormRef"
        label-width="100px"
      >
        <el-form-item label="文章标题" prop="title">
          <el-input
            v-model="pubForm.title"
            placeholder="请输入标题"
            style="width: 50%"
            maxlength="40"
          ></el-input>
        </el-form-item>
      <el-form-item label="副标题" prop="originalText">
          <el-input
            v-model="pubForm.originalText"
            placeholder="副标题"
            style="width: 50%"
            maxlength="40"
          ></el-input>
        </el-form-item>
        <el-form-item label="避坑篇章" prop="type">
          <el-select v-model="pubForm.type" placeholder="避坑篇章">
             <el-option label="设计篇" value="C1"></el-option>
             <el-option label="玄关篇" value="C2"></el-option>
             <el-option label="客餐厅篇" value="C3"></el-option>
             <el-option label="厨房篇" value="C4"></el-option>
             <el-option label="卫生间篇" value="C5"></el-option>
             <el-option label="阳台篇" value="C6"></el-option>
             <el-option label="卧室篇" value="C7"></el-option>
             <el-option label="家具篇" value="C8"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文章内容" prop="detail">
          <!-- 使用 v-model 进行双向的数据绑定 -->
               <div class="aaa">
         <!-- 工具栏 -->
         <Toolbar
             :editor="editor"
             :defaultConfig="toolbarConfig"
         />
         <!-- 编辑器 -->
         <Editor
      
             :defaultConfig="editorConfig"
             v-model="html"
             @onChange="onChange"
             @onCreated="onCreated"
         />
     </div>
        </el-form-item>

        <el-button class="chonegt" type="primary" id="upload" @click="hPub('已发布')"
          >发布</el-button
        >

      </el-form>
    </el-tabs>
  </div>
</template>

<script>

import { addteRole } from "@/api/roles";
import {ossmessage} from '@/api/oss'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import ossUpload from '@/components/Hamburger/oss'

export default {
components: { Editor, Toolbar },//组件引入

  data() {
    
    return {
           toolbarConfig:'',
     
  	 		editor: null, //实例
                 editorConfig: {
               placeholder: '请输入内容...',

      MENU_CONF: {
            uploadImage: {
                customUpload:    //自定义上-oss
                    async (file, insertFn) => {
                        const resultUrl = await ossUpload(file, file.name)
                        insertFn(resultUrl)
                    }
                   }
               }

           },
     html:'',
      file:'',
      category:'',
      resultGTR:'',
      html:'',
      editor: null,
      artkistVisible: true,
      listinfo:[],
      resutlgtr:'',
    
      pubForm: {
        richTextContent:'',
        originalText:'',
        title: "",
        detail: "",
        images:[],
        text:'',
        type:''

      },
      IA_inputw:'',
      artkistVisibles: {
        title: [
          {
            required: true,
            message: "请输入文章标题",
            trigger: "blur",
          },
          {
            min: 1,
            max: 40,
            message: "文章标题的长度为1-40个字符",
            trigger: "blur",
          },
        ],
         originalText:[
           {
            required: true,
            message: "副标题",
            trigger: "blur",
          },
         ],
        content: [
          {
            required: true,
            message: "请输入文章内容",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created(){
    this.loachgtr()
  },
  methods: {
   async loachgtr(){
    const res = await ossmessage({
        'ossGroup':'CommodityMainImages'
      })
    // console.log(res.data);
    this.listinfo = res.data

    },
  onCreated(editor) {
   			            this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
   			        },
   			        onChange(editor) {
   			            // console.log('onChange', editor.getHtml()) // onChange 时获取编辑器最新内容
                    this.cofg = editor.getHtml()
                    this.IA_inputw = this.cofg.replace(/<[^<>]+>/g, "").replace(
                 /&nbsp;/gi,
                 ""
                  );
   			        },
    // 发布
     hPub() {
          this.pubForm.richTextContent = this.html
     setTimeout(() => {
      // const fd = new FormData();
      var data = []
          
       this.cofg.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/,function (match, capture) {
					                  data.push(capture);
					            });
                   this.pubForm.images = data
                    this.html = this.html.replace(/<img/gi,
          '<img style="max-width:100%; min-width:100%; height:auto;display:inline-block;margin:10px auto;"')
          // // console.log('777',this.html);
          //  console.log('857',this.pubForm.images);
         this.$refs.pubFormRef.validate(async (valid) => {
        if(!valid) return
      this.pubForm.text =  `<html><head> <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico"><title>${this.pubForm.title}</title></head><body style="maegin:0;">
    <div >${this.html}</div>
       <div class="blackScreen" style="display: none;display:none;    position:fixed;    top:0;    right:0;    bottom:0;    left:0;    background-color:#000000;    z-index:1000;">"
            <span class="fullScreenImg" style='position:absolute;    top:0;    right:0;    bottom:60px;    left:0;    background:center center no-repeat;    background-size:contain;'></span>" 
        </div>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"><\/script>

    <script>
        $(document).ready(function () {
    $("body").append("" );
});
 
$(function () {
  
// 放大图片 

    $('img').on('click', function () {
        // console.log("放大");
        if (this.getAttribute("src")) {
             $(".fullScreenImg").css('background-image', 'url(\\\'' + this.getAttribute('src') + '\\\')');
            $(".blackScreen").fadeIn(100);
        }
    });
  
// 关闭放大图片
    $(".blackScreen").on("click", function () {
        // console.log("关闭");
        $(".blackScreen").fadeOut(100);
    });
 
});
    <\/script>
    </body></html>`

            // console.log('789',this.pubForm);  
       const res = await addteRole(this.pubForm);

      this.$message.success(res.msg);
      if(res.code == 200){
        this.$router.push('/home/fitments/defraud')
      } else return
      this.loachgtr()
      // this.$router.back();
         })
     },1000)
    },

    hback() {
      this.$router.back();
    },
  },
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>

<style scoped>
.el-tabs{
  line-height: 160px;
}
.hacevn {
  background-color: #fff;
  padding: 20px;
}
.chonegt {
  transform: translateX(140%);
  color: #fff;
  background-color: #ff7144;
  border: 1px solid #fff;
}
.escanut {
  width: 70%;
  height: 70%;
}
::v-deep .ql-editor {
  height: 300px;
}
.aaa{
  /* height: 500px; */
  border: 1px solid #dcdfe6;
}
</style>
